<template>
	<view>
		<view :class="{'mask':showPopup}" @click="maskClick" :style="{bottom:footer_height+'px'}"></view>
		<view class="bottom-category-content" :class="{'bottom-category-view-show':showPopup}" :style="{bottom: footer_height + 'px'}">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
				<view class="nav-left-item" @click="categoryClickMain(item,index)" :key="index" :class="index==categoryActive?'active':''" v-for="(item,index) in categoryList">
					<!-- 此处可自定义内容 -->
					<image :src="item.icon" />
				</view>
			</scroll-view>

			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'">
				<view :id="index===0?'first':''" class="nav-right-item" v-for="(item,index) in subCategoryList" :key="index" @tap="chooseIcon(index)">
					<!-- 此处可自定义内容 -->
					<image :src="item" />
				</view>
			</scroll-view>
		</view>
		<view class="footer" :style="{height:footer_height+'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false, //是否显示控件
				categoryActive: 0, //当前活跃的选项(左侧tabbar)
				height: 'auto',
				categoryList: [ //动态设置底部弹出内容
					{
						icon: "../../static/find/comment.png",
						subList: [
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
							"../../static/find/comment.png",
						]
					},
					{
						icon: '../../static/find/islike.png',
						subList: [
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",
							"../../static/find/islike.png",

						]
					},
					{
						icon: '../../static/find/like.png',
						subList: ["../../static/find/like.png", "../../static/find/like.png", "../../static/find/like.png",
							"../../static/find/like.png", "../../static/find/like.png", "../../static/find/like.png"
						]
					},
					{
						icon: '../../static/find/liked.png',
						subList: ["../../static/find/liked.png", "../../static/find/liked.png", "../../static/find/liked.png",
							"../../static/find/liked.png", "../../static/find/liked.png", "../../static/find/liked.png"
						]
					},
					{
						icon: '../../static/find/camera.png',
						subList: ["../../static/find/camera.png", "../../static/find/camera.png", "../../static/find/camera.png",
							"../../static/find/camera.png", "../../static/find/camera.png", "../../static/find/camera.png"
						]
					}

				],
				subCategoryList: [], //categoryList中对应的subList
				scrollTop: 0
			};
		},
		props: {
			bottom: {
				type: Number,
				default: 0
			}
		},
		computed: {
			footer_height() {
				return uni.upx2px(this.bottom);
			}
		},
		methods: {
			//bottom-popup
			show() {
				this.showPopup = true;
				this.subCategoryList = this.categoryList[this.categoryActive].subList;
			},
			maskClick() { //背景层点击事件
				this.cancel();
			},
			cancel() { //隐藏
				this.showPopup = false
			},
			//scroll-view
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(categroy, index) {
				this.categoryActive = index;
				this.subCategoryList = categroy.subList;
				this.scrollTop = -this.scrollHeight * index;
			},
			chooseIcon(index) { //右侧点击事件
				console.log(this.categoryActive + '----' + index);
				//提交到父级
				this.$emit('exampleEvent',[this.categoryActive,index]);
			}
		}
	};
</script>

<style>
	@import url("./category.css");
</style>
